<!-- 商品详情页 -->
<template>
	<view>
		<home :clickColorIndex="1"></home>
		<view class="product-content">
			<view class="product-page">
				<!-- <view class="product-title">30 mm同轴系统XY位移调整架</view> -->
				<view class="product-host" v-if="detailsData.poster">
					<image :src="detailsData.poster" class="product-image" mode="aspectFill" />
				</view>
				
				<view class="product-host" v-else>
					<image src="/static/wufengmiantu.jpg" class="product-image" mode="aspectFill" />
				</view>
				
			</view>

			<view class="product-center">
				<view class="product-breadcrumb">
					<uni-breadcrumb separator=">">
						<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
							{{route.name}}
						</uni-breadcrumb-item>
					</uni-breadcrumb>
				</view>
				<view class="tab-wrap">
					<!-- Tab 导航栏 -->
					<view class="tab-nav">
						<view v-for="(item, idx) in tabList" :key="idx" v-show="item.title!=='3D模型下载'||is3D"
							:class="['tab-item', { active: currentTab === idx }]" @click="currentTab = idx">
							{{ item.title }}
						</view>
					</view>
					<!-- 内容区域 -->
					<view class="tab-content">
						<view class="tab-3D" v-show="currentTab === 0">
							<!-- 3D模型下载 -->
							<stpViewer :isDownload="true" :fileID="detailsData.step_file[0].fileID"></stpViewer>
						</view>
						<view v-show="currentTab === 1">
							<!-- 参数规格内容 -->
							<view v-html="addRedDotAfterBr(detailsData.spec)"></view>
						</view>
						<view v-show="currentTab === 2">
							<!-- 技术说明内容 -->
							<view v-html="detailsData.describe"></view>
						</view>
						<view v-show="currentTab === 3">
							<!-- 应用举例内容 -->
							<view v-html="detailsData.example_image"></view>
							
						</view>

						<view class="introduce-page" v-for="(item,index) in detailsData.param" :key="index">
							<view class="title_back">
								<!-- <text class="title">CSD-M05 16mm快拆式笼板</text> -->
								<text class="title">{{item.title}}</text>
							</view>
							<view class="content-row">
								<view class="img-container">
									<!-- <image :src="detailsData.images[0].url" mode="aspectFit" @click="previewImage(0)"></image> -->
									<swiper class="goods-swiper" circular :autoplay="item.goods_image.length > 1?true:false"
										:current="currentSwiper">
										<!-- 遍历图片数组 -->
										<swiper-item v-show="item.goods_image && item.goods_image[0] " v-for="(image_item, image_index) in item.goods_image"
											:key="image_index">
											<!-- 点击图片触发预览 -->
											<image class="swiper-image" :src="image_item" mode="aspectFill"
												@click="previewImage(item.goods_image,image_index)"></image>
										</swiper-item>
										
										<swiper-item v-show="!item.goods_image || !item.goods_image[0] ">
											<!-- 点击图片触发预览 -->
											<image class="swiper-image" src="/static/wutu.png" mode="aspectFill"></image>
										</swiper-item>
										
										
									</swiper>
								</view>
								<view class="desc-container">
									<view class="desc-item" v-for="(feature_item,feature_index) in item.feature"
										:key="feature_index">
										<text class="desc-li"></text>
										<text class="desc-li2">{{feature_item}}</text>
										<!-- <text class="desc-li2">11111</text> -->
									</view>
									<view class="desc-detail">
										{{item.content}}
									</view>
								</view>
								<view class="img-container">
									<image v-if="item.goods_example_image" :src="item.goods_example_image" mode="aspectFill"
										@click="previewImage(item.goods_example_image,0)"></image>
										
										<image v-else src="/static/wutu.png" mode="aspectFill"></image>
											
								</view>
							</view>

							<productForm v-if="detailsData.param" scrollableBodyHeight="aotu" :param="detailsData"
								:goods_id="detailsId" :sku="item" @cartCountChange="cartCountChangeFun">
							</productForm>
						</view>
						<!-- <productForm v-if="detailsData.param" scrollableBodyHeight="aotu" :param="detailsData"
							:goods_id="detailsId">
						</productForm> -->
						<view class="related-products" v-show="products.length>0">
							<view class="title1">相关产品</view>
							<view class="product-grid">
								<view class="product-card" v-for="(item, index) in products" :key="index"
									@click="goDetails(item)">
									<image :src="item.images[0].url" mode="aspectFill" class="product-img"></image>
									<text class="product-name">{{ item.title }}</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>

		<guarantee></guarantee>
		<footing></footing>
		<!-- <menu-tool ref="menuTool" @positionData="positionDataFun"></menu-tool> -->
		<animationShopping ref="animation" :endPosition="endPosition"></animationShopping>
		<menu-tool ref="menuTool" @positionData="positionDataFun" :cartTotalCount="cartTotalCount1"></menu-tool>
	</view>

</template>

<script>
	import {
		goods,
		relatedGoods
	} from '../../utils/http_data.js';
	export default {
		name: "productDetails",
		data() {
			return {
				is3D: false, // 是否显示3D图
				detailsData: {}, // 详情页数据
				currentBigImg: '/static/goods06.jpg', // 初始大图
				routes: [{
						to: "/pages/product-center/product-center",
						name: "工术商城",
					},
					{
						to: "/pages/product-center/product-center",
						name: "产品中心",
					}
				],
				currentTab: 0, // 当前激活的 Tab 索引
				tabList: [{
						title: '3D模型下载'
					},
					{
						title: '参数规格'
					},
					{
						title: '技术说明'
					},
					{
						title: '应用举例'
					}
				],
				largeImages: [ // 介绍里的图片
					"/static/goods05.jpg",
					"/static/goods04.jpg"
				],
				productImg1: '/static/goods05.jpg',
				productImg2: '/static/goods04.jpg',

				// 相关产品
				products: [{
					name: '俯仰偏转可调平台',
					image: '/static/goods05.jpg' // 替换为实际图片URL
				}],
				applicationList: [
					'/static/goods05.jpg', // 左图实际URL
					'/static/goods05.jpg', // 左图实际URL
					'/static/goods05.jpg' // 右图实际URL
				],

				detailsId: '', // 带过来的id
				menuToolData: null, // 购物车坐标
				endPosition: { // 小球运动的终点
					endX: 1334,
					endY: 752
				},


				// 当前轮播索引
				currentSwiper: 0,
				cartTotalCount1:0,
			}
		},
		onLoad(option) {
			console.log('商品详情页：', option); //打印出上个页面传递的参数。
			this.detailsId = option;
		},
		mounted() {
			this.detailsGoodsfun()
		},
		methods: {
			/**
			 * 在HTML字符串中的br标签和p标签后添加红色圆点效果
			 * @param {string} htmlString - 包含HTML内容的字符串
			 * @returns {string} - 添加红色圆点后的HTML字符串
			 */
			addRedDotAfterBr(htmlString) {
			    // 定义红色圆点的HTML
			    const redDot = '<span style="display:inline-block;width:6px;height:6px;background-color:#d9001b;border-radius:50%;margin:0 2px;margin-right:10px;margin-left:10px;"></span>';
			    
			    // 使用正则表达式替换br标签和p标签，在其后添加红色圆点
			    let result = htmlString.replace(/<br\s*\/?>/gi, '$&' + redDot);
			    result = result.replace(/<p>/gi, '$&' + redDot);
			    
			    return result;
			},
			previewImage(arr, index) {
				// 提取所有图片的url组成数组
				var urls = [];
				if (Array.isArray(arr)) {
					// urls = arr.map(item => item.url);
					urls = arr.map((item) => {
						return item.url ? item.url : item
					});
				} else {
					urls[0] = arr;
				}

				console.log(index)
				// 调用UniApp预览图片API
				uni.previewImage({
					current: index, // 当前显示图片的索引
					urls: urls, // 需要预览的图片链接列表
					loop: true, // 是否可循环预览
					success: res => {
						console.log('预览图片成功', res);
					},
					fail: err => {
						console.error('预览图片失败', err);
					}
				});
			},



			positionDataFun(val) {
				console.log('3333:', val)
				this.menuToolData = val;
				this.endPosition.endX = val.left + 30
				this.endPosition.endY = val.top + 40
			},
			//查询分类下具体数据
			detailsGoodsfun() {

				console.log('查看问题1')
				console.log('查看问题1：', this.detailsId._id)
				goods({
					id: this.detailsId._id,
					orderByField: 'title,images,param,poster'
				}).then((data) => {
					console.log('详情页数据：', data.data)
					this.detailsData = data.data;
					document.title = this.detailsData.title;
					const detailsData = this.detailsData;
					this.detailsData.category.forEach((currentValue, index, array) => {
						// currentValue：当前元素
						// this.routes[index + 1] = {
						this.routes[index + 2] = {
							to: "/pages/product-center/product-center?_id=" + detailsData.category_id[
									detailsData.category_id.length - 1] + "&name=" + detailsData
								.category[1],
							name: currentValue,
						}
						// index：当前索引（可选）
						// array：原数组（可选）
					});
					this.routes[this.routes.length] = {
						to: "",
						name: this.detailsData.title,
					}
					console.log('1212：', this.detailsData.step_file)
					if (this.detailsData.step_file && this.detailsData.step_file[0] && this.detailsData.step_file[0].fileID) {
						this.is3D = true
						this.currentTab = 0;
					} else {
						this.is3D = false
						this.currentTab = 1;
					}

					this.relatedGoodsFun()

				})
			},
			//查询相关产品
			relatedGoodsFun() {
				relatedGoods({
					id: this.detailsData.category_id[1],
					_id: this.detailsData._id
				}, 5).then((data) => {
					this.products = data;

				}).catch((err) => {
					console.log('err::::', err)
				})
			},
			// switchImage(index) {
			// 	this.currentIndex = index; // 切换当前显示的大图索引
			// },
			download(url, name) {
				// uni.showToast({
				// 	title: `正在下载 ${item.name} 工程图`,
				// 	icon: 'none'
				// });
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							// 保存文件（仅App端支持，小程序/H5需调整）
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									uni.showToast({
										title: '下载成功，路径：' + saveRes.savedFilePath,
										icon: 'none'
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败：' + err.errMsg,
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '下载失败，状态码：' + res.statusCode,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '下载请求失败：' + err.errMsg,
							icon: 'none'
						});
					}
				});
			},
			goDetails(val) {
				console.log('000:', val);
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?_id=' + val._id
				});
			},
			cartCountChangeFun(val,e){
				console.log('传递过来的数据val：',val)
				console.log('传递过来的数据e：',e)
				this.cartTotalCount1 = val;
				this.$refs.animation.startFromButton(e)
			},
		}
	}
</script>
<style>
	
</style>
<style scoped>
	.product-content {
		width: 100%;
		/* display: flex; */
		background-color: #f0f0f0;
		overflow: hidden;
	}


	/* 3D */

	.product-page {
		width: 100%;
		/* max-width: 1360px; */
		min-height: 540px; 
		margin: 10px auto;
		background-color: #FFF;
		position: relative;
		overflow: hidden;
	}

	.product-title {
		width: 100%;
		/* height: 20px; */
		text-align: center;
		margin-top: 50px;
		font-size: 20px;
		font-weight: bold;
	}

	.product-host {
		width: 100%;
		height: 100%;
		/* background: #f7f7f7; */
		position: absolute;
		user-select: none;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		height: 100%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.product-center {
		width: 94%;
		max-width: 1360px;
		min-height: 490px;
		margin: 10px auto;
		background-color: #FFF;
	}

	.product-breadcrumb {
		width: 100%;
		height: 54px;
		line-height: 54px;
		padding: 0 30px;
	}

	.product-breadcrumb /deep/ .uni-breadcrumb {
		/* padding: 10px; */
	}

	/* tab */
	.tab-wrap {
		max-width: 1680px;
		min-width: 1360px;
		/* background: #f0f0f0; */
		margin: 0 auto;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.tab-nav {
		display: flex;
		height: 48px;
		/* 调整高度 */
		line-height: 48px;
		background: #e0e0e0;
	}

	.tab-item {
		width: 180px;
		text-align: center;
		font-size: 14px;
		color: #333;
		transition: all 0.3s;
		cursor: pointer;
	}

	.tab-item.active {
		color: #fff;
		background: #E60012;
	}

	.tab-content {
		padding: 10px 1rem;
		line-height: 30px;
		font-size: 14px;
	}


	/* 内容 */

	/* 介绍内容 */
	.desc-container {
		padding: 20px;
		font-size: 14px;
	}

	.title_back {
		background-color: #EBEBEB;
		margin-bottom: 15px;
		margin-top: 45px;
	}

	.title {
		font-size: 18px;
		font-weight: 700;
		color: #333;
		background-color: #FFF;
		padding: 4px 6px;
		display: inline-block;
	}

	.content-row {
		display: flex;
		min-height: 246px;
		align-items: flex-start;
		gap: 15px;
		margin-bottom: 20px;
	}

	.img-container {
		flex: 1;
		/* 左右图片各占1份宽度 */
		height: 300px;
		margin: auto;
		cursor: pointer;
	}

	.img-container image {
		width: 99%;
		height: 99%;
		border: 1px solid #eee;
		border-radius: 4px;
	}

	.desc-container {
		flex: 2;
		/* 描述区占2份宽度 */
		line-height: 1.6;
	}

	.desc-item {
		margin: 8px 0;
		color: #333;
		line-height: 14px;
		font-size: 14px;
	}

	.desc-li {
		width: 5px;
		height: 5px;
		border-radius: 5px;
		display: inline-block;
		background-color: #E60012;
		margin-bottom: 2px;
		margin-right: 6px;
	}

	.desc-li2 {
		line-height: 20px;
		/* display: inline-block; */
	}

	.desc-detail {
		color: #666;
		margin-top: 10px;

		text-indent: 2em;
		text-align: justify;
		text-align-last: left;
		word-break: break-all;
		/* 英文单词过长时自动换行，避免间距过大 */
	}


	/* 相关产品 */
	.related-products {
		padding: 20px 20px;
	}

	.title1 {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin: 20px 0;
		color: #333;
	}

	.product-grid {
		display: flex;
		/* display: grid; */
		/* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */
		gap: 20px;
		/* justify-content: center; */
	}

	.product-card {
		width: 240px;
		height: 260px;
		text-align: center;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
		display: flex;
		flex-direction: column;
		cursor: pointer;
	}

	.product-card:hover {
		transform: translateY(-5px);
	}

	.product-img {
		width: 190px;
		height: 190px;
		padding: 20px 10px;
		margin: 10px auto;
		box-sizing: border-box;
		object-fit: cover;
	}

	.product-name {
		padding: 10px;
		font-size: 14px;
		color: #666;
		font-weight: 700;
		/* line-height: 1.4; */


		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-card:hover .product-name {
		color: #E60012;
	}

	/* 应用举例 */
	.product-gallery {

		padding: 15px 0;
	}

	.image-container {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.image-column {
		/* flex: 1;  */
		/* width: 640px; */
		cursor: pointer;
	}

	.gallery-image {
		width: 300px;
		height: 300px;
		border-radius: 6px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}



	.tab-3D {
		width: 100%;
		height: 500px;
	}


	.goods-swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 70%;
		object-fit: cover;
	}

	/* 适配不同屏幕尺寸 */
	@media (min-width: 750rpx) {
		.goods-swiper {
			height: 500rpx;
		}
	}
</style>